<template>
	<div class="card-main">
		<div class="card-main-header f-between">
			<p class="card-main-title">快捷操作</p>
			<el-button type="primary" text size="large" @click="handleOperate">
				<el-icon class="el-icon--right"> <icon-config theme="outline" size="24" /></el-icon>
				自定义
			</el-button>
		</div>

		<div class="card-main-content flex">
			<div class="card_wrap">
				<div class="card_item" v-for="(item, index) in dataList" :key="index" @click="handlerLinkTo(item)">
					<div class="left">
						<img :src="getImage(item.icon)" alt="" class="icon-img" />
					</div>
					<div class="right">
						<p class="w-100">{{ item.label }}</p>
						<p class="text-gray" v-if="item.tip">{{ item.tip }}</p>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="visible" :title="dialogTitle" width="75%">
			<component v-if="visible" :is="whichCommon[nowRowData.component]" v-bind="nowRowData.config || {}" @refresh="handleRefresh"></component>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import OldmanPage from '@/views/datacenter/basicData/oldman/components/TabForm/index.vue'
import serviceOrg from '@/views/datacenter/basicData/serviceOrg/components/TabForm/index.vue'
import serviceOrgHome from '@/views/datacenter/basicData/serviceOrgHome/components/TabForm/index.vue'
import serviceFacility from '@/views/datacenter/basicData/serviceFacility/components/TabForm/index.vue'
import govUser from './govUser/index.vue'

let imageList = import.meta.glob(`@/assets/icons/*.webp`, { eager: true })

const whichCommon = {
	OldmanPage,
	serviceOrg,
	serviceOrgHome,
	serviceFacility,
	govUser,
}
const nowRowData = ref({
	component: '',
	config: {},
})

const router = useRouter()
const visible = ref(false)
const dialogTitle = ref('操作')
const dataList = [
	{ label: '录入服务对象', icon: 'icon1', tip: '快速录入服务对象入口', component: 'OldmanPage' },
	{ label: '录入政策文件', icon: 'icon1', href: '/datacenter/business/policyData/index' },
	{ label: '综合查询', icon: 'icon2' },
	{
		label: '开账户',
		icon: 'icon3',
		component: 'govUser',
	},
	{ label: '数据管理设置', icon: 'icon4', href: '/dataManage/dataManageSetting/index' },
	{ label: '异常数据处理', icon: 'icon5', href: '/dataWarehouse/appeal/index' },
	{ label: '基础数据变更', icon: 'icon6', href: '/dataWarehouse/dataChange/index' },
	{ label: '采集服务设施', icon: 'icon7', component: 'serviceFacility' },
	{ label: '采集服务组织', icon: 'icon7', component: 'serviceOrg' },
]

const getImage = (name: string): string => {
	let filePath = `/src/assets/icons/${name}.webp`
	const generator: any = imageList[filePath]
	const intance = generator.default
	return intance
}

const handleOperate = () => {
	ElMessage.info('快捷功能暂未上线')
}
const handleRefresh = () => {
	visible.value = false
}
const handlerLinkTo = (item) => {
	if (item.href) {
		router.push({
			path: item.href,
		})
	} else if (item.component) {
		nowRowData.value = item
		dialogTitle.value = item.dialogTitle
		visible.value = true
	} else {
		ElMessage.info('快捷功能暂未上线')
	}
}
</script>

<style scoped lang="scss">
.text-gray {
	margin-top: 9px;
	color: rgba(28, 28, 40, 0.5);
}

.card-main {
  position: relative;
  width: 100%;
	&-header {
		height: 42px;
		margin-top: 10px;
	}

	&-content {
		// flex-flow: column wrap;
    flex-flow: row wrap;
    display: flex;
		height: 140px;
		.card-box {
			height: vw(60);
			margin: 4px;
		}

		.icon-img {
			width: 36px;
			height: 36px;
		}

		.card_item {
		  height:calc(50% - 5px);
			width: calc(100% / 5 - 10px);
			border-radius: 10px;
			background: #fff;
      display: flex;
		  align-items: center;
		  font-size: 1rem;
    		.left {
        	width: 2.25rem;
        	height: 2.25rem;
        	margin-left: 0.5rem;

        	img {
        		width: 100%;
        		height: 100%;
        	}
        }
	      .right {
	      	margin-left: 12px;
	      	font-size: 1rem;
	      }
        &:nth-of-type(1) {
          width: 16.5rem;
          height: 100%;
          display: flex;
          align-items: center;
          margin: 0;

          .left {
            margin: 10px 0 0 10px;
          }

          .right {
            margin: 20px 0 0 10px;
          }
        }
		}

		.card_wrap {
      gap: 10px;
      width: 100%;
			height:100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: space-between;
		}
    &:nth-of-type(1) {
      width: 16.5rem;
			height: 100%;
			align-items: start;
			margin: 0;
    }
	}
}
</style>
